<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="何毓堂">
    <title></title>
    <link rel="stylesheet" type="" href="">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            padding: 0;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: space-around;
        }

        a {
            display: inline-block;
            text-decoration: none;
            color: #636663;
            background-color: #fff;
            line-height: 40px;
        }

        a:hover {
            color: #bd4f22;
        }

        .head {
            width: 100%;
            height: 65px;
            line-height: 63px;
        }

        .header {
            width: 1500px;
            height: 67px;
            margin: 0 auto;
        }

        span {
            width: 220px;
            height: 164px;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            position: absolute;
            margin-left: -85px;
            margin-top: 10px;
            border: 2px solid #eee;
            border-radius: 5px;
            opacity: 0;
        }
        i {
            position: absolute;
            display: inline-block;
            width: 15px;
            height: 10px;
            background-image: url(1.png);
            background-position: -111px 0;
            left: 90px;
            top: -10px;
        }

        nav {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-image: url(img\common.png);
            background-position: -123px -20px;
            top: 25px;
        }
        
         .teleplay:hover >span{
             opacity: 1; 
             }
          .movie:hover >span{
             opacity: 1; 
        }
          .variety:hover >span{
             opacity: 1; 
        }
          .children:hover >span{
             opacity: 1; 
        }
          .more:hover >span{
             opacity: 1; 
        }

    </style>
</head>

<body>
    <div class="head">
        <div class="header">
            <ul>
                <li><a href="" style="color:#6caac9">首页</a></li>
                <li class="teleplay">
                    <a href="">剧集</a>
                    <span> 
                     <i></i>
                    <a href="">楚乔传TV版</a>
                    <a href="">镇魂街 第一季</a>
                    <a href="">醉玲珑</a>
                    <a href="">终极三国2017</a>
                    <a href="">春风十里不...</a>
                    <a href="">我的前半生</a>
                    <a href="">微微一笑很...</a>
                    <a href="">龙珠传奇</a>
                </span>
                </li>
                <li class="movie">
                    <a href="">电影</a>
                    <!-- <span>
                      <i></i>
                    <a href="">速度与激情</a>
                    <a href="">人间大炮</a>
                    <a href="">战狼</a>
                    <a href="">杀破狼2</a>
                    <a href="">逆时营救</a>
                    <a href="">记忆大师</a>
                    <a href="">我的外星女友</a>
                    <a href="">有部电影</a>
                </span> -->
                </li>
                <li class="variety">
                    <a href="">综艺</a>
                    <!-- <span>
                     <i></i>
                    <a href="">极限挑战 第...</a>
                    <a href="">挑战者联盟...</a>
                    <a href="">脑大洞开 第...</a>
                    <a href="">火星情报局...</a>
                    <a href="">暴走漫画—...</a>
                    <a href="">日日煮 2017</a>
                    <a href="">开心俱乐部...</a>
                    <a href="">举杯呵呵喝...</a>
                </span> -->
                </li>
                <li><a href="">音乐</a></li>
                <li class="children">
                    <a href="">少儿</a>
                    <span>
                     <i></i>
                    <a href="">宝狄与好友...</a>
                    <a href="">小猪佩奇</a>
                    <a href="">纳米核心 第...</a>
                    <a href="">汪汪队立大...</a>
                    <a href="">我的汤姆猫...</a>
                    <a href="">会说话的家族</a>
                    <a href="">小玲玩具</a>
                    <a href="">棉花糖和云...</a>
                </span>
                </li>
                <li><a href="">来疯</a></li>
                <li><a href="">直播</a></li>
                <li><a href="">片库</a></li>
                <li><a href="">资讯</a></li>
                <li><a href="">纪实</a></li>
                <li><a href="">公益</a></li>
                <li><a href="">体育</a></li>
                <li><a href="">汽车</a></li>
                <li><a href="">科技</a></li>
                <li><a href="">财经</a></li>
                <li><a href="">娱乐</a></li>
                <li><a href="">文化</a></li>
                <li><a href="">动漫</a></li>
                <li><a href="">搞笑</a></li>
                <li><a href="">旅游</a></li>
                <li><a href="">时尚</a></li>
                <li><a href="">亲子</a></li>
                <li><a href="">教育</a></li>
                <li><a href="">游戏</a></li>
                <li class="more">
                <a href="">更多</a>
                    <nav></nav>
                <span style="width:100px;  margin-left:-30px; text-align:center;">
                     <i style="margin-left:-50px;"></i>
                    <a href="">VR</a>
                    <a href="">生活</a>
                    <a href="">原创</a>
                    <a href="">排行</a>
                </span>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>